<!--  -->
<template>
  <div class="grammar-sentence">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="quitStudy"></span>
      </div>
      <div class="course-title">
        {{ reverseStatus.name }}
      </div>
      <div class="btn-group">
        <a @click="goSkill">考点解读</a>
        <a :disabled="printDisabled" @click="print">打印</a>
        <a v-if="+sentenceList.last_answer !== 0" @click.stop="goLastAnswer"
          >上次练习</a
        >
        <a class="play-text" @click="goTest">练一练</a>
      </div>
    </div>
    <sentenceListItem
      v-if="sentenceList.list.length"
      :renderData="sentenceList.list"
      @goStudy="goStudy"
    ></sentenceListItem>
    <Empty v-else></Empty>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
let completePng = require("assets/reverse/complete-shadow.png");
import { fetchEndTime, printData, fetchGroupList } from "@/services/reverse";
import { SUCCESS_CODE } from "@/utils/const";
import sentenceListItem from "./sentenceList";
import Empty from "@/components/Empty";
import Timetips from "@/components/Timetips";
import { mapState, mapMutations } from "vuex";
export default {
  name: "grammarSentence",
  components: {
    sentenceListItem,
    Empty,
    Timetips
  },
  data() {
    return {
      printDisabled: false,
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      sentenceList: (state) => state.sentenceList,
    }),
  },
  watch: {},
  methods: {
    ...mapMutations([
      "setSentenceList",
      "setSentenceCurrent",
      "setGrammarExplain",
    ]),
    goSkill() {
      this.setGrammarExplain(true);
    },
    print() {
      let ids = this.sentenceList.list.map((v) => v.id).toString();
      printData({
        sen_id: ids,
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.printInterval();
          this.$message.success("已提交打印,请到管理平台进行打印");
        } else {
          this.$message.error("您打印的过于频繁，请休息一下");
        }
      });
    },
    printInterval() {
      //倒计时
      let time = 60;
      this.printDisabled = true;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.printDisabled = false;
        } else {
          this.printDisabled = true;
          time--;
        }
      }, 1000);
    },
    goLastAnswer() {
      this.$router.push({
        path: "/reverse/answer-notes",
      });
    },
    goTest() {
      this.$router.push({
        path: "/reverse/grammar-test",
      });
    },

    goStudy(item) {
      console.log(item.pass, "----");
      if (+item.pass === 0) {
        fetchGroupList({
          chapter_id: this.reverseStatus.chapters_id,
          curr_id: this.reverseStatus.curr_id,
        }).then((res) => {
          if (!res.data.length) {
            this.setSentenceCurrent({ id: item.id });
            this.$router.push("/reverse/scene-into");
          } else {
            this.$router.push("/reverse/group-test");
          }
        });
      } else if (+item.pass === 2) {
        this.setSentenceCurrent({ id: item.id });
        this.$router.push("/reverse/scene-into");
      }
    },
    quitStudy() {
      this.$yxpConfirm({
        msg: "是否退出本节学习",
      })
        .then(() => {
          // fetchEndTime({
          //   chapter_id: this.reverseStatus.chapters_id,
          //   curr_id: this.reverseStatus.curr_id,
          // });
          this.$router.push({
			path:"/reverse",
			query:{ ...this.$route.query }
			});
        })
        .catch(() => {});
    },
  },
  created() {},
  mounted() {
    let { no_next } = this.$route.query;
    if (no_next) {
      this.$yxpConfirm({
        msg: `<img width="223" src="${completePng}" alt=""/>
             <p>已完成本节训练，返回学习列表，节内循环？</p>
            `,
        type: "alert",
        html: true,
        alertBtnText: "返回列表",
      })
        .then(() => {
          this.$router.push("/reverse/grammar-sentence");
        })
        .catch(() => {});
    }
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    let audio = document.getElementById("reverse-audio");
    audio.pause();
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.grammar-sentence {
  display: flex;
  flex-direction: column;
  height: 100%;
  .list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 30px 40px;
  }

  .chose-course-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .anticon {
      font-size: 24px; /* no */
    }

    .header-left {
      flex: 3;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      flex: 1;
      font-weight: 700;
      font-size: 20px;

      .check-title {
        color: #c7c7c7;
        padding: 0 15px;
      }
      .check__active {
        color: @primary-color;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 23px;
          height: 4px;
          background-color: @primary-color;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .btn-group {
      flex: 3;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      & > a {
        display: inline-block;
        margin-left: 50px;
      }
      .play-text {
        font-weight: 700;
      }
    }
  }
}
</style>
